<template>
  <div class="toast-manager">
    <Toast
      v-for="toast in toasts"
      :key="toast.id"
      :title="toast.title"
      :message="toast.message"
      :type="toast.type"
      :duration="toast.duration"
      :closable="toast.closable"
      @close="removeToast(toast.id)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Toast from './Toast.vue'

interface ToastItem {
  id: number
  title: string
  message?: string
  type: 'success' | 'error' | 'warning' | 'info'
  duration: number
  closable: boolean
}

const toasts = ref<ToastItem[]>([])
let nextId = 1

const addToast = (toast: Omit<ToastItem, 'id'>) => {
  const newToast: ToastItem = {
    id: nextId++,
    ...toast
  }
  toasts.value.push(newToast)
}

const removeToast = (id: number) => {
  const index = toasts.value.findIndex(toast => toast.id === id)
  if (index > -1) {
    toasts.value.splice(index, 1)
  }
}

// 暴露方法给全局使用
defineExpose({
  addToast,
  removeToast
})
</script>

<style scoped>
.toast-manager {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}
</style> 